<template>
  <div>
    <!--      配置模式 只能上传1个  limit=1-->
    <FormUpload
      ref="refUpload"
      :allow-extensions="props.allowExtensions"
      :btnText="props.btnText"
      :limit="1"
      :max-mb="props.limit"
      :tips="props.tips"
      @file-list-change="fileListChange"
    ></FormUpload>
  </div>
</template>
<script lang="ts" setup>
import FormUpload from "@/components/Form/FormUpload.vue";
import { requestSysCommonGetConfigs } from "@/api/modules/sysCommon";
import { onMounted, ref } from "vue";
import { ResultData } from "@/api/interface";
 
const refUpload = ref();
//调接口获取配置值
onMounted(async () => {
  requestSysCommonGetConfigs([props.configKey]).then((res: ResultData) => {
    refUpload.value.ClearFiles();
    if (res.data[props.configKey]) {
      refUpload.value.AppendPath(res.data[props.configKey], res.data[props.configKey]);
      emits("valChange", props.configKey, res.data[props.configKey]);
    }
  });
});

const emits = defineEmits(["valChange"]);
//通知键值对发生改变
const fileListChange = (listPath: string[]) => {
  if (listPath.length > 0) {
    emits("valChange", props.configKey, listPath[0]);
  }
};

const props = defineProps({
  configKey: {
    type: String,
    required: true
  },
  btnText: {
    type: String,
    default: "上传文件",
    required: false
  },
  tips: {
    type: String,
    default: "请上传图片或pdf,最大10Mb",
    required: false
  },
  limit: {
    type: Number,
    default: 1,
    required: false
  },
  maxMb: {
    //最大上传mb
    type: Number,
    default: 10,
    required: false
  },
  //允许上传的后缀名
  allowExtensions: {
    type: Array<string>,
    default: [] //空数组表示不限制上传类型[".jpeg",".png"]
  }
});
</script>

<style lang="scss" scoped></style>
